<template>
	<div id="isCheackWrapper">
		<vue-content>
		<vue-body>
	    	<el-table
	        v-loading.body="loading"
	        :data="tableData"
	        border
	        ref="table"
	        style="width: 100%">
	        <el-table-column
	          prop="institutionNo"
	          label="机构编号">
	        </el-table-column>
	        <el-table-column
	          prop="institutionName"
	          label="机构名称">
	        </el-table-column>
	        <el-table-column
	          label="审核状态">
	          <template scope="scope">
	            {{ scope.row.checkStatus | checkStatus }}
	          </template>
	        </el-table-column>
	        <el-table-column
	          prop="checkNo"
	          label="审核编号">
	        </el-table-column>
	      </el-table>
	       <el-table v-loading.body="loading" :data="productList" style="width: 35%" border>
				<el-table-column prop="productName" label="商品名称" >
				</el-table-column>
				<el-table-column label="操作" width="100">
		          <template scope="scope">
			          <el-button
		              size="small"
		              type="info"
		              @click="handleDetail(scope.$index, scope.row, productList)">详情</el-button>
		          </template>
		      </el-table-column>
			</el-table>
	        <el-button v-if="checkStatus =='01' ?true:false" type="primary" class="insProbtn" @click="checkSucc()">通过</el-button>
	        <el-button v-if="checkStatus =='01' ?true:false" type="primary" class="insProbtn" @click="checknuSucc()">不通过</el-button>
	   </vue-body>
	   <edit-detail
      ref="edit-detail"
      @close="editFinish"
      :view="view"
      v-if="view ==='detail'"/>
	   </vue-content>
	</div>
	
</template>

<script>
import { cheackProduct,cheackSucc,cheacknuSucc} from "@/services/institution";
import {RequestError} from '@/services/errors'
import {deepClone} from '@/utilities/object'
import EditDetail from './Detail'
export default {
  name: "edit-role",
  components: {EditDetail},
  data: () => ({
      tableData: [],
      baseData:[],
      loading: false,
      institutionNo:"",
      checkNo:"",
      view: '',
      multipleSelection: [],
      productList:[],
      checkStatus:""
  }),
  props: {},
  created(){
    // 取到路由带过来的参数 
    let routerParams = this.$route.query;
    // 将数据放在当前组件的数据内
    console.log(routerParams)
    this.institutionNo = routerParams.institutionNo
    this.checkNo = routerParams.checkNo
    this.loadData()
  },
  mounted() {
  	this.checked();
  },
  methods: {
    closeDialog() {
      this.$emit("close");
    },
	checked(){
	    //首先el-table添加ref="table"引用标识
	    for (var data of this.tableData){
	    	if(data.isChecked === "1"){
	    		this.$refs.table.toggleRowSelection(data);
	    	}
	    }
	},
   async checkSucc(){
   		try {
          await cheackSucc({institutionNo:this.institutionNo,checkNo:this.checkNo})
          this.$message({
              showClose: true,
              message: "提交成功",
              type: "success"
          });
          this.loadData();
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
    },
    async checknuSucc(){
    	try {
          await cheacknuSucc({institutionNo:this.institutionNo,checkNo:this.checkNo})
          this.$message({
              showClose: true,
              message: "提交成功",
              type: "success"
          });
          this.loadData();
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
    },
    async loadData () {
        this.loading = true
        try {
          let data = await cheackProduct({institutionNo:this.institutionNo,checkNo:this.checkNo})
          this.tableData = []
          this.tableData.push(data.data)
          this.checkStatus = this.tableData[0].checkStatus
          this.productList = data.data.productList
		  this.$nextTick(function(){
              this.checked();//每次更新了数据，触发这个函数即可。
          })
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
    },
    async handleDetail (index, data) {
        this.view = 'detail'
        await this.$nextTick()
        this.$refs['edit-detail'].productNo = data.productNo
        this.$refs['edit-detail'].productName = data.productName
        this.$refs['edit-detail'].loadData()
      },
      editFinish (needRefresh) {
        this.view = ''
        if (needRefresh) {
          this.loadData()
        }
      }
    
  },
  filters: {
      isChecked (value) {
        return {0: 'false', 1: 'true'}[value]
      },
      productType (value) {
        return {1: '实物', 2: '彩票',3:'券/虚拟'}[value]
      },
      checkStatus (value) {
        return {'01': '待审核', '02': '审核通过','03':'审核不通过'}[value]
      }
  }
};
</script>

<style>
	#isCheackWrapper{
		width: 80%;
		margin-top:20px;
		margin-left: 10%;
	}
	.insProbtn{
		float: right;
		margin-left: 30px;
	}
	.proListName{
		border:1px solid #dfe6ec;
		white-space: nowrap;
	    background-color: #eef1f6;
	    text-align: center;
	    height: 40px;
	    min-width: 0;
	    text-overflow: ellipsis;
	    vertical-align: middle;
	    line-height: 40px;
	    width: 100%;
	    font-weight: 600;
	    box-sizing: border-box;
	    color: #1f2d3d;
	    width: 25%;
	}
	.proList{
		border-left: 1px solid #dfe6ec;
		border-top: 1px solid #dfe6ec;
		overflow: hidden;
		margin-bottom: 10px;
	}
	.proList li{
		float: left;
		width: 25%;
		text-indent: 18px;
		line-height: 40px;
		border-bottom: 1px solid #dfe6ec;
		border-right: 1px solid #dfe6ec;
	}
</style>